<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx}/res/css/main.css">
    <link rel="stylesheet" href="${ctx}/res/css/plugins.css">
    <title>软装到家</title>
    
    <style>
    .new-arrive li p.name {
	    width: 270px;
	    
	}
    
	.hot li p.name {
    	height: 16px;
    	overflow: hidden;
	}
    .category-floor .right-content .brand-detail li .name {
    	width: 200px;
    	height: 22px;
    	overflow: hidden;
    }
    </style>
</head>

<body>
<%@include file="head.jsp" %>
<!--主焦点图-->
<div class="slider  w-100p ">
    <ul class="bxslider">
        <c:forEach items="${ads }" var="a">
        <li><img src="${a.image }" style="height:420px"/></li>
        </c:forEach>
    </ul>
</div><!--搜索框-->
<div class="searchbar-warp-max w-1200 margin-0-auto">
    <div class="searchbar">
        <form>
            <span class="icon-serach"></span>
            <input class="serach-input" type="text" value="沙发" placeholder="请输入关键字">
            <button class="serach-btn" type="submit">搜索</button>
        </form>
    </div>
    <ul class="key-words margin-0-auto">
        <c:forEach items="${categories }" var="c">
        <li>${c.name }</li>
        <li class="splider"></li>
        </c:forEach>
    </ul></div> <!--新品发布-->
<div class="new-arrive  w-1200 margin-0-auto">
     <img class="title" src="${ctx}/res/img/icon/xinpinfabu.png">
     <a class="more" href="${ctx}/res#"><img src="${ctx}/res/img/icon/more.png"></a>
    <ul>
            <c:forEach items="${newProducts }" var="p">
            <li>
                <a href="${ctx}/product/detail?id=${p.id}">
                    <img src="${p.headImage }"/>
                    <p class="name">${p.name }</p>
                    <p class="price">
                    	￥<fmt:formatNumber value="${p.firstSpec.sellingPrice }" type="currency" pattern="0.00"/>
                    </p>
                </a>
            </li>
            </c:forEach>
    </ul>
</div><!--优选爆款-->
<div class="hot  w-1200 margin-0-auto">
    <img class="title" src="${ctx}/res/img/icon/youpinbaoxuan.png">
    <a class="more" href="${ctx}/res#"><img src="${ctx}/res/img/icon/more.png"></a>
    <ul>
            <c:forEach items="${recommendProducts }" var="p">
            <li>
                <a href="${ctx}/product/detail?id=${p.id}">
                    <img src="${p.headImage }"/>
                    <p class="name">${p.name }</p>
                    <p class="desc">${p.subTitle }</p>
                    <p class="price">
                        <span>已售:${p.totalSold }</span>  
                        <del class="orign-price">￥
                        <fmt:formatNumber value="${p.firstSpec.marketPrice }" type="currency" pattern="0.00"/>
                        </del>
                        <span class="sale-price">￥
                        <fmt:formatNumber value="${p.firstSpec.sellingPrice }" type="currency" pattern="0.00"/>
                        </span>
                    </p>
                </a>
            </li>
            </c:forEach>
    </ul>
</div><!--品馆类目-->
<div class="category  w-1200 margin-0-auto" style="display:none">
    <img class="title" src="${ctx}/res/img/icon/pinguanleimu.png">
    <ul>
            <li>
                <div class="fl brand-min-list">
                <c:forEach items="${jinkouBrands }" var="b">
                <a class="fl brand-min"><img src="${b.image }"/></a>
                </c:forEach>
                </div>
                <div class="fl brand-max">
                    <a href="${ctx}/res#">
                    <p class="brand-name"><span>进口馆</span><span class="en-name">IMPORT PAVILION</span></p>
                    <img src="${jinkouProduct.headImage }" />
                    <p class="name">${jinkouProduct.name }</p>
                    <p class="desc">${jinkouProduct.subTitle }</p>
                    <p class="price">已售:${jinkouProduct.totalSold }<span>￥<fmt:formatNumber value="${jinkouProduct.firstSpec.sellingPrice }" type="currency" pattern="0.00"/></span></p>
                    </a>
                </div>
            </li>
        <li>
            <div class="fl brand-min-list">
                <c:forEach items="${dingzhiBrands }" var="b">
                <a class="fl brand-min"><img src="${b.image }"/></a>
                </c:forEach>
            </div>
            <div class="fl brand-max br">
                <a href="${ctx}/res#">
                    <p class="brand-name"><span>定制馆</span><span class="en-name">CUSTOM PAVILION</span></p>
                    <img src="${dingzhiProduct.headImage }" />
                    <p class="name">${dingzhiProduct.name }</p>
                    <p class="desc">${dingzhiProduct.subTitle }</p>
                    <p class="price">已售:${dingzhiProduct.totalSold }<span>￥<fmt:formatNumber value="${dingzhiProduct.firstSpec.sellingPrice }" type="currency" pattern="0.00"/></span></p>
                </a>
            </div>
        </li>
        <li>
            <div class="fl brand-min-list">
                <c:forEach items="${pingpaiBrands }" var="b">
                <a class="fl brand-min"><img src="${b.image }"/></a>
                </c:forEach>
            </div>
            <div class="fl btn brand-max">
                <a href="${ctx}/res#">
                    <p class="brand-name"><span>品牌馆</span><span class="en-name">BRAND PAVILION</span></p>
                    <img src="${pingpaiProduct.headImage }" />
                    <p class="name">${pingpaiProduct.name }</p>
                    <p class="desc">${pingpaiProduct.subTitle }</p>
                    <p class="price">已售:${pingpaiProduct.totalSold }<span>￥<fmt:formatNumber value="${pingpaiProduct.firstSpec.sellingPrice }" type="currency" pattern="0.00"/></span></p>
                </a>
            </div>
        </li>
        <li>
            <div class="fl brand-min-list">
                <c:forEach items="${gexingBrands }" var="b">
                <a class="fl brand-min"><img src="${b.image }"/></a>
                </c:forEach>
            </div>
            <div class="fl btn brand-max br">
                <a href="${ctx}/res#">
                    <p class="brand-name"><span>个性馆</span><span class="en-name">PERSONALITY PAVILION</span></p>
                    <img src="${gexingProduct.headImage }" />
                    <p class="name">${gexingProduct.name }</p>
                    <p class="desc">${gexingProduct.subTitle }</p>
                    <p class="price">已售:${gexingProduct.totalSold }<span>￥<fmt:formatNumber value="${gexingProduct.firstSpec.sellingPrice }" type="currency" pattern="0.00"/></span></p>
                </a>
            </div>
        </li>
    </ul>
</div><div class="w-100p bg-gray bg-gray-box">
    <c:forEach items="${cpList }" var="cp">
    <div class="ad-banner w-1200 margin-0-auto">
        <img src="${ctx}/res/img/ad-1.jpg">
    </div>    
    <div class="category-floor w-1200 margin-0-auto">
        <div class="title-bar">
            <span class="color-tag color-tag-1"></span>
            <span class="cat-name">${cp.category.name }</span>
            <!-- 
            <span class="cat-en-name">RESIDENTIAL FURNITURE</span>
             -->
            <a href="${ctx}/res/modules/list.html" class="fr more-link">MORE >></a>
        </div>
        <div class="left-brand mt10 fl color-tag-1">
            <div class="cat-slider">
                <ul class="bxslider">
                    <li><img src="${ctx}/res/img/other/cat-l-1.jpg"/></li>
                    <li><img src="${ctx}/res/img/other/cat-l-1.jpg"/></li>
                    <li><img src="${ctx}/res/img/other/cat-l-1.jpg"/></li>
                </ul>
            </div>
            <div class="title color-tag-1">
                <h2>时尚暖调家具上新</h2>
                <p>设计师的自我修养</p>
            </div>
        </div>
        <div class="right-content mt10 fl">
            <div class="brand-list">
                <c:forEach items="${cp.children }" var="cc" varStatus="status">
                <span class="${status.index eq 0 ? 'active' : '' }">${cc.name }</span>
                </c:forEach>
            </div>
            <div class="brand-detail">
                <ul>
                        <c:forEach items="${cp.products }" var="p">
                        <li>
                            <a href="${ctx}/res#">
                                <img src="${p.headImage }">
                                <p class="name">${p.name }</p>
                                <p class="desc">${p.subTitle }</p>
                                <div class="bottom">
                                    <p class="price">￥<fmt:formatNumber value="${p.firstSpec.sellingPrice }" type="currency" pattern="0.00"/></p>
                                    <p><del>￥<fmt:formatNumber value="${p.firstSpec.marketPrice }" type="currency" pattern="0.00"/></del></p>
                                    <p class="solded">已售:${p.totalSold }</p>
                                </div>
                            </a>
                        </li>
                        </c:forEach>
                </ul>
            </div>
        </div></div>
    
      </c:forEach>
      
    
    <!-- 
    <div class="ad-banner w-1200 margin-0-auto">
        <img src="${ctx}/res/img/ad-1.jpg">
    </div>
     -->    
</div>
<%@include file="foot.jsp" %>
<script type="text/javascript">
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            preloadImages:'all',
            auto:true
        });
    }); 
</script>
</body>
</html>
